<template>
  <el-container class="homeBody">

    <!-- 头部 -->
    <el-header>
        <el-row :gutter="20">
          <el-col :span="40">
            <el-button type="text" icon="el-icon-s-home" class="backButton" @click="$router.push('/')"></el-button>
            <el-input placeholder="请输入内容" clearable v-model="search" size="mini">
              <el-button slot="append" icon="el-icon-search" @click="reloadSeach ()" style="height: 46px; margin-left: 0"></el-button>
            </el-input>
          </el-col>
        </el-row>
      <div v-if="isLogined()">
        <span>{{username}}</span>
        <el-button type="info" size="mini" @click="logout()">退出</el-button>
      </div>
      <div v-else>
        <el-button size="mini" @click="loginDialog = true">登录</el-button>
        <el-button size="mini" @click="registerDialog = true">注册</el-button>
      </div>
    </el-header>

    <!-- 主体部分 -->
    <el-container>

      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse()">|||</div>
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF"
        unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="$route.path">
          <!-- 知识图谱导航 -->
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-location"></i>
              <span>图谱展示</span>
            </template>
              <el-menu-item-group>
                <el-menu-item index="/Canvas">
                  <i class="el-icon-menu"></i>
                  <span>知识图谱</span>
                </el-menu-item>
              </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" v-if="isLogined ()">
            <template #title>
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
              <el-menu-item-group>
                <el-menu-item index="/User">
                  <i class="el-icon-menu"></i>
                  <span>用户信息</span>
                </el-menu-item>
              </el-menu-item-group>
          </el-submenu>
          <!-- 知识管理导航 -->
          <el-submenu index="3" v-if="isPower ()">
            <template #title>
              <i class="el-icon-location"></i>
              <span>数据管理</span>
            </template>
              <el-menu-item-group>
                <el-menu-item index="/NodeManager">
                  <i class="el-icon-menu"></i>
                  <span>知识管理</span>
                </el-menu-item>
                <el-menu-item index="/CategoriesManager">
                  <i class="el-icon-menu"></i>
                  <span>分类管理</span>
                </el-menu-item>
              </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主要显示区域 -->
      <el-main>
        <router-view @needLogin="loginDialog = true"></router-view>
      </el-main>
    </el-container>

    <!-- 用户登录对话框 -->
    <el-dialog title="用户登录" :visible.sync="loginDialog" width="50%" @close="loginDialogClose()" :close-on-click-modal="false">
      <el-form :model="loginUser" label-width="140px">
        <el-form-item label="用户账号">
          <el-input v-model="loginUser.code"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="loginUser.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="registerDialog = true">注 册</el-button>
          <el-button @click="loginDialog = false">取 消</el-button>
          <el-button type="primary" @click="loginClicked ()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用户注册对话框 -->
    <el-dialog title="用户注册" :visible.sync="registerDialog" width="50%" @close="registerDialogClose()" :close-on-click-modal="false">
      <el-form :model="registerUser" label-width="140px">
        <el-form-item label="用户名">
          <el-input v-model="registerUser.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="registerUser.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="registerDialog = false">取 消</el-button>
          <el-button type="primary" @click="registerClicked ()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script>
import { login, register } from '@/assets/api.js'
export default {
  name: 'Home',
  data () {
    return {
      // 侧边栏是否缩小
      isCollapse: false,
      // 是否显示注册对话框
      registerDialog: false,
      // 是否显示登录对话框
      loginDialog: false,
      // 用户登录信息
      loginUser: {
        code: 'admin',
        password: '123456'
      },
      // 用户注册信息
      registerUser: {
        username: '',
        password: ''
      },
      // 搜索框内绑定的元素
      search: ''
    }
  },
  methods: {
    // 侧边栏的缩小/放大操作
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 判断权限是否足够
    isPower () {
      if (window.sessionStorage.admin === '1') {
        return true
      } else {
        return false
      }
    },
    // 判断是否登录
    isLogined () {
      if (window.sessionStorage.token) {
        return true
      } else {
        return false
      }
    },
    // 用户登录操作
    async loginClicked () {
      const {data: res} = await login(this.loginUser)
      if (res.code === 200) {
        this.$message.success('登录成功')
        window.sessionStorage.setItem('token', res.msg.slice(res.msg.indexOf('token:') + 6))
        window.sessionStorage.setItem('id', res.data.id)
        window.sessionStorage.setItem('admin', res.data.admin)
        window.sessionStorage.setItem('username', res.data.username)
        window.sessionStorage.setItem('code', res.data.code)
        window.sessionStorage.setItem('img', res.data.img)
        window.location.reload()
      } else {
        this.$message.error(res.msg)
      }
      this.loginDialog = false
    },
    // 用户登录对话框关闭重置用户登录信息
    loginDialogClose () {
      this.loginUser.code = 'admin'
      this.loginUser.password = '123456'
    },
    // 用户退出
    logout () {
      this.$confirm('是否确认退出用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.clear()
        window.location.reload()
      }).catch(() => {
      })
    },
    // 用户注册操作
    async registerClicked () {
      const {data: res} = await register(this.registerUser)
      if (res.code === 200) {
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
      this.registerDialog = false
    },
    // 用户注册对话框关闭重置用户注册信息
    registerDialogClose () {
      this.registerUser.username = ''
      this.registerUser.password = ''
    },
    // 搜索操作
    reloadSeach () {
      this.$router.push('/Seach/' + this.search)
    }
  },
  created () {
    this.activePath = '/Canvas'
  },
  computed: {
    // 返回用户名
    username () {
      return window.sessionStorage.username
    }
  }
}
</script>

<style scoped>
  /* 根元素样式 */
  .homeBody {
    height: 100%;
    color: white;
  }
  /* 头部样式 */
  .el-header {
    background-color: #333744;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-header div {
    display: flex;
    align-items: center;
  }
  .el-header button {
    float: right;
    margin-left: 5px;
  }
  .backButton {
    font-size: 19px;
    color: white;
    margin-right: 5px;
  }
  .backButton:hover {
    color: #409EFF;
  }
  /* 主体样式 */
  .el-main {
    padding: 0;
    margin: 0;
  }
  /* 侧边栏样式 */
  .el-aside {
    background-color: #333744;
  }
  .el-aside .el-menu {
    border-right: none;
  }
  /* 侧边栏的缩小/放大按钮样式 */
  .toggle-button {
    background-color: #4A5064;
    color: #fff;
    font-size: 10px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
</style>
